﻿@model Vitus.MediaProcessing.ViewModels.MediaProfileAttachmentsPartViewModel
@using Orchard.ContentManagement;
@using Orchard.Utility.Extensions;

@{
    Script.Require("jQueryColorBox");
    Script.Require("ZeroClipboard");
    Style.Require("jQueryColorBox");
    Style.Include("MediaProfileAttachmentsPartAdmin.css");
}

<fieldset>
    <legend>@T("Used Images in Profiles")</legend>
    <div id="media-profile-attachments-save-message" class="message message-Warning media-profile-attachments-message">@T("You need to save your changes.")</div>
    <div id="media-profile-attachments-copied-message" class="message message-Warning media-profile-attachments-message">@T("The image URL was copied to your clipboard. Use [Ctrl]+[V] to paste it to the text.")</div>
    <table class="items">
        <thead>
            <tr>
                <th>@T("Original Image Path")</th>
                <th>@T("Image Profile Name")</th>
                <th></th>
            </tr>
        </thead>
        <tbody id="media-profile-attachments-list">
            @foreach (var attachment in Model.Attachments)
            {
                <tr data-mediapath="@attachment.MediaPath" data-profilename="@attachment.ProfileName" class="media-profile-attachments-attachment">
                    <td>
                        <input type="text" value="@attachment.MediaPath" size="50" disabled="disabled" />
                    </td>
                    <td>
                        <input type="text" value="@attachment.ProfileName" size="15" disabled="disabled" />
                    </td>
                    <td>
                        <span data-mediapath="@attachment.MediaPath" data-profilename="@attachment.ProfileName" class="media-profile-attachments-preview button">@T("Preview")</span>
                        <span data-clipboard-text="@Display.MediaUrl(Path: attachment.MediaPath, Profile: attachment.ProfileName)" class="media-profile-attachments-copyurl button">@T("Copy URL")</span>
                        <span data-mediapath="@attachment.MediaPath" data-profilename="@attachment.ProfileName" class="media-profile-attachments-remove button grey">@T("Remove")</span>
                    </td>
                </tr>
            }
        </tbody>
    </table>
    <p>
        <input type="text" id="media-profile-attachments-add-mediapath" value="" size="50" disabled="disabled" />
        <span id="media-profile-attachments-add-btn-pick" class="button">@T("Pick Image")</span>
     
        <select id="media-profile-attachments-add-profilename">
            @foreach (var profile in Model.Profiles)
            {
                <option value="@profile.Name">@profile.Name</option>
            }
        </select>
       
        <span id="media-profile-attachments-add-btn-add" class="button">@T("Add")</span>
    </p>
    
    @Html.HiddenFor(m => m.SelectedAttachments)
</fieldset>

@using (Script.Foot())
{
<script type="text/javascript">
//<![CDATA[
    
    (function ($) {
        var addMedia = $('#media-profile-attachments-add-mediapath');
        var addProfile = $('#media-profile-attachments-add-profilename');
        var pickButton = $('#media-profile-attachments-add-btn-pick');
        var addButton = $('#media-profile-attachments-add-btn-add');
        var template = '<tr data-mediapath="{mediaPath}" data-profilename="{profileName}" class="media-profile-attachments-attachment"><td><input type="text" value="{mediaPath}" size="50" disabled="disabled" /></td><td><input type="text" value="{profileName}" size="15" disabled="disabled" /></td><td><span data-mediapath="{mediaPath}" data-profilename="{profileName}" class="media-profile-attachments-preview button">@T("Preview")</span> <span data-clipboard-text="{mediaUrl}" class="media-profile-attachments-copyurl button">@T("Copy URL")</span> <span data-mediapath="{mediaPath}" data-profilename="{profileName}" class="media-profile-attachments-remove button grey">@T("Remove")</span></td></tr>';
        
        ZeroClipboard.setDefaults({ moviePath: '@Url.Content("~/Modules/Vitus.MediaProcessing/Scripts/ZeroClipboard.swf")' });
        var clip = new ZeroClipboard($('span.media-profile-attachments-copyurl'));

        clip.on('dataRequested', function (client, args) {
            $('#media-profile-attachments-copied-message').show().delay(2000).fadeOut('slow');
        });

        var refreshSelectedAttachments = function() {
            var selectedAttachments = $('#@Html.FieldIdFor(m => m.SelectedAttachments)');
            selectedAttachments.val('');
            $("tr.media-profile-attachments-attachment").each(function () {
                selectedAttachments.val(selectedAttachments.val() + "|" + $(this).attr("data-mediapath") + ":" + $(this).attr("data-profilename"));
            });

            selectedAttachments.val(selectedAttachments.val().substring(1));

            var itemsCount = $("tr.media-profile-attachments-attachment").length;
            clip.glue($('span.media-profile-attachments-copyurl'));
        };

        var clearAdd = function () {
            addMedia.val('');
        };

        refreshSelectedAttachments();
        
        pickButton.click(function () {
            var url = '@HttpUtility.JavaScriptStringEncode(Url.Action("Index", "Admin", new { area = "Orchard.MediaLibrary", dialog = true }))';

            $.colorbox({
                href: url,
                iframe: true,
                reposition: true,
                width: "100%",
                height: "100%",
                onLoad: function () {
                    // hide the scrollbars from the main window
                    $('html, body').css('overflow', 'hidden');
                    $('#cboxClose').remove();
                },
                onClosed: function () {
                    $('html, body').css('overflow', '');

                    var selectedData = $.colorbox.selectedData;
                    
                    if (selectedData == null) // Dialog cancelled, do nothing
                        return;

                    addMedia.val(selectedData[0].resource);
                }
            });
        });

        addButton.click(function () {
            var mediaPath = addMedia.val();
            var profileName = addProfile.val();
            
            if (!mediaPath) // Media has not yet been selected
                return;

            if (!profileName) // No profiles have yet been created
                return;
            
            var url = '@HttpUtility.JavaScriptStringEncode(Url.Action("ImageProfileUrl", "Admin", new { area = "Vitus.MediaProcessing" }))';

            $.get(url, { mediaPath: mediaPath, profileName: profileName })
            .done(function (data) {
                var mediaUrl = data;

                var contentHtml = template.replace(/\{mediaPath\}/g, mediaPath).replace(/\{profileName\}/g, profileName).replace(/\{mediaUrl\}/g, mediaUrl);
                var content = $(contentHtml);
                $('#media-profile-attachments-list').append(content);

                refreshSelectedAttachments();
                clearAdd();

                $('#media-profile-attachments-save-message').show();
            });
        });

        $(document).on("click", '.media-profile-attachments-preview', function () {
            var url = '@HttpUtility.JavaScriptStringEncode(Url.Action("ImageProfilePreview", "Admin", new { area = "Vitus.MediaProcessing" }))';

            var mediaPath = $(this).data('mediapath');
            var profileName = $(this).data('profilename');
            
            $.get(url, { mediaPath: mediaPath, profileName: profileName })
            .done(function(data) {
                $.colorbox({
                    html: data
                });
            });
        });

        $(document).on("click", '.media-profile-attachments-remove', function () {
            $(this).closest('tr').remove();
            refreshSelectedAttachments();
            $('#media-profile-attachments-save-message').show();
        });
        
    })(jQuery);
//]]>
</script>
}